<template>
  <div class="my_info">
    <div class="avatar-area">
      <h3>头像</h3>
      <!-- <a-avatar :src="userAvatar" slot="avatar" class="userPhoto"></a-avatar> -->
      <a-upload
        name="file"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        :action="uploadUrl"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <img
          v-if="avatarUrl != '' && avatarUrl != null"
          :src="userAvatar"
          alt="avatar"
          class="userPhoto"
        />
        <div v-else>
          <!-- <a-icon :type="loading ? 'loading' : 'plus'" />
          <div class="ant-upload-text">Upload</div> -->
          <a-avatar :size="64" icon="user" />
        </div>
      </a-upload>
    </div>
    <div class="info-area">
      <h2>基本信息</h2>
      <h3>01/ &nbsp;&nbsp;&nbsp;&nbsp; 姓名</h3>
      <a-input
        ref="userNameInput"
        v-model="userName"
        placeholder="user name"
        class="inputInfo"
      >
        <a-icon slot="prefix" type="user" />
        <a-tooltip slot="suffix" title="Extra information">
          <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </a-input>
      <h3>02/ 学号</h3>
      <a-input
        ref="userNumberInput"
        v-model="userNumber"
        placeholder="user number"
        class="inputInfo"
      >
        <a-icon slot="prefix" type="number" />
        <a-tooltip slot="suffix" title="Extra information">
          <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </a-input>
      <h3>03/ 电话</h3>
      <a-input
        ref="userPhoneInput"
        v-model="userPhone"
        placeholder="user phone number"
        class="inputInfo"
      >
        <a-icon slot="prefix" type="phone" />
        <a-tooltip slot="suffix" title="Extra information">
          <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </a-input>
      <h3>04/ 年龄</h3>
      <a-input
        ref="userAgeInput"
        v-model="userAge"
        placeholder="user age"
        class="inputInfo"
      >
        <a-icon slot="prefix" type="history" />
        <a-tooltip slot="suffix" title="Extra information">
          <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </a-input>
      <h3>05/ 性别</h3>
      <a-select
        default-value="male"
        style="width: 80px"
        v-model="userSex"
        class="inputInfo"
      >
        <a-select-option value="male"> 男 </a-select-option>
        <a-select-option value="female"> 女 </a-select-option>
      </a-select>
      <br />
      <a-button type="primary" @click="refresh" class="btn_refresh"
        >更新
      </a-button>
    </div>
  </div>
</template>

<script>
import RequestUtils from "../../utils/requestUtils.js";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: "MyInfo",
  mounted() {
    let that = this;
    // let id = that.GLOBAL.id;
    let id = sessionStorage.getItem("id");
    let result = "";
    let callback = function (res) {
      console.log("resource is");
      console.log(res);
      result = res.data.result;
      console.log("result is");
      console.log(result);
      that.userAge = result.age;
      that.userName = result.userName;
      that.userNumber = result.userNumber;
      that.userPhone = result.phoneNumber;
      that.userSex = result.gender;
      that.userAvatar = that.GLOBAL.site + "/" + result.avatar;
      that.avatarUrl = result.avatar;
    };
    RequestUtils.requestUserInfo(that, id, callback, callback);
  },
  data() {
    return {
      userName: "",
      userNumber: "",
      userPhone: "",
      userAge: "",
      userSex: "",
      userAvatar: "",
      uploadUrl: `${this.GLOBAL.site}/users/${sessionStorage.getItem(
        "id"
      )}/avatar`,
      loading: false,
      avatarUrl:"" //判断url是否为空
    };
  },
  methods: {
    refresh() {
      // let id = this.GLOBAL.id;
      let id = sessionStorage.getItem("id");
      let userInfo = {
        userName: this.userName,
        userNumber: this.userNumber,
        phoneNumber: this.userPhone,
        age: this.userAge,
        gender: this.userSex,
        // avatar: this.userAvatar,
      };
      let that = this;
      let callback2 = function (res) {
        console.log("resource is");
        console.log(res);
        that.$message.success("用户信息更新成功!");
      };
      RequestUtils.requestPutUserInfo(that, id, userInfo, callback2, callback2);
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.userAvatar = imageUrl;
          this.loading = false;
          this.$message.success("用户头像更换成功!");
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>

<style scoped>
h3 {
  text-align: left;
  font-weight: bolder;
  margin-top: 10px;
}
h2 {
  text-align: center;
  font-weight: bolder;
}

.btn_refresh {
  margin-top: 30px;
  margin-left: 130px;
}

.inputInfo {
  width: auto;
  margin-left: 50px;
  margin-bottom: 10px;
}
.my_info {
  display: flex;
  flex-direction: row;
}
.userPhoto {
  width: 100px;
  height: 100px;
  border-radius: 100%;
}
.avatar-area {
  margin-left: 300px;
  margin-top: 30px;
}
.info-area {
  margin-left: 150px;
}
</style>

